<template>
	<scroll-view >
		<!-- 头部 -->
		<view class="closed">
			<!-- <view class="top">
				<navigator class="nav" url="../mall-payment/mall-payment" open-type="navigate">
					<image src="https://z3.ax1x.com/2021/04/11/c0u6m9.png"></image>
				</navigator>
				<view class="image">
					<image src="https://z3.ax1x.com/2021/04/11/c0ugT1.png"></image>
				</view>
			</view> -->
			<view class="closedOne">
				<image src="https://z3.ax1x.com/2021/04/11/c0uDlF.png"></image>
				<text>交易已关闭</text>
			</view>
			<view class="closedTwo">
				<text>再逛逛，下一件一定是有缘分的宝贝</text>
			</view>
		</view>
		<!-- 内容 -->
		<view class="center">
			<view  class="substance">
				<view class="goods">
					<view class="header">商品</view>
					<!-- 渲染订单数据 -->
					<view class="goodlistes">
						<view class="goodItem" v-for="item in goodlistes" :key="item.id">
							<view class="itemImage">
								<image :src="item.image"></image>
							</view>
							<view class="center">
								<view>{{item.name}}</view>
								<view>
									<text class="text1">￥{{item.price}}</text>
									<text class="text2">×1</text>
								</view>
							</view>
						</view>
					</view>
					<view class="addcart">
						<view class="cart">
							<text>加入购物车</text>
						</view>
						<view class="number">
							<text>共三件</text>
							<image src="https://z3.ax1x.com/2021/04/10/cdIlNQ.png"></image>
						</view>
					</view>
					<view class="pay1">
						<text>需付款</text>
						<text>￥</text>
						<text>238.00</text>
					</view>
				</view>
			</view>
			<view class="orderInformation">
				<view class="orderInformation1">
					<view class="addcart">
						<view class="cart">
							<text>订单信息</text>
						</view>
						<view class="number">
							<text>查看更多</text>
							<image src="https://z3.ax1x.com/2021/04/10/cdIlNQ.png"></image>
						</view>
					</view>
					<view class="one">
						<view>收货信息</view>
						<view>何明花 86-15978945612 四川省成都市成华区万年场御风一路8号明信鹿湾花园A区2004</view>
					</view>
					<view class="two">
						<view>
							<text class="text1">订单编号</text>
							<text class="text2">161093773583717654</text>
						</view>
						<view>复制</view>
					</view>
					<view class="three">
						<view>
							<image src="https://z3.ax1x.com/2021/04/10/cdHsIO.png"></image>
							<text>联系客服</text>
						</view>
					</view>
				</view>
				
			</view>
			
			<Selected></Selected>	
		</view>
		<!-- 固定定位 -->
		<view class="location">
			<view class="bottom">
				<view class="pay">
					<text>删除订单</text>
				</view>
				<view class="pay">
					<text>加入购物车</text>
				</view>
			</view>
		</view>
		
	</scroll-view>
	
</template>

<script>
	import Selected from '../../../components/selected-recommendation/selected-recommendation.vue'
	export default {
		data() {
			return {
				goodlistes:[
					// {id:0,name:"轮胎品牌机油型号是含有W字母的，是的意思",image:"https://z3.ax1x.com/2021/04/10/cahiad.png",price:249.00},
					// {id:1,name:"轮胎品牌机油型号是含有W字母的，是的意思",image:"https://z3.ax1x.com/2021/04/10/cdidg0.png",price:289.00},
					{id:2,name:"轮胎品牌机油型号是含有W字母的，是的意思",image:"https://z3.ax1x.com/2021/04/10/cdR441.png",price:399.00}
				]
			}
		},
		methods: {
			
		},
		components:{
			Selected
		}
	}
</script>

<style lang="scss" scoped>
.closed{
	border-top: 1rpx solid rgba(255,255,255,0.5);
	padding-top: 20rpx;
	background-color:#ff700a;
	text-align: center;
	box-sizing: border-box;
	padding: 24rpx;
	padding-bottom: 40rpx;
	.closedOne{
		margin-left: 250rpx;
		display: flex;
		align-items: center;
		image{
			width: 30rpx;
			height: 30rpx;
			margin-right: 20rpx;
		}
		text{
			opacity: 0.8;
			color: #FFFFFF;
			font-size: 28rpx;
			
		}
	}
	.closedTwo{
			margin-top: 10rpx;
			opacity: 0.8;
			color: #FFFFFF;
			font-size: 24rpx;
			
	}
	
}
	
.center{
	background-color: #f0f0f0;
	box-sizing: border-box;
	box-sizing: border-box;
	padding: 24rpx;
	margin-bottom: 20rpx;
	.substance{
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		background-color: #ffffff;
		.goods{
			width: 100%;
			.header{
				width: 100%;
				height: 60rpx;
				opacity: 0.8;
				font-weight: bold;
			}
			.goodlistes{
				.goodItem{
					display: flex;
					justify-content: space-between;
					.itemImage{
						width: 20%;
						image{
							width: 120rpx;
							height: 120rpx;            
						}
						
					}
					.center{
						background-color: #ffffff;
						width: 80%;
						padding-left: 24rpx;
						view{
							&:nth-of-type(1){
								color: #333333;
								font-size: 28rpx;
								opacity: 0.8;
								height: 60%;
							}
							&:nth-of-type(2){
								float: right;
								.text1{
									font-weight: bold;
									font-size: 28rpx;
									opacity: 0.8;
									margin-right: 10rpx;
								}
								.text2{
									color: #555555;
									font-size: 28rpx;
								}
								
							}
						}
					}
				}
			}
	
			.addcart{
				display: flex;
				justify-content: space-between;
				.cart{
					text{
						right: 0rpx;
						display: inline-block;
						margin-right: 10rpx;
						width: 150rpx;
						height: 45rpx;
						text-align: center;
						line-height: 45rpx;
						border-radius: 25rpx;
						border: 2rpx solid  #9d9d9d;
						background-color: #ffffff;
						color:  #9d9d9d;
						opacity: 0.8;
						font-size: 22rpx;
					}
				}
				.number{
					text{
						font-size: 24rpx;
						color: #808080;
						opacity: 0.8;
						margin-right: 10rpx;
					}
					image{
						width: 20rpx;
						height: 15rpx;
					}
				}
			}	
			.pay1{
				margin-top: 20rpx;
				margin-left:450rpx;
				text{
					&:nth-of-type(1){
						font-size: 28rpx;
						font-weight: bold;
						margin-right: 10rpx;
					}
					&:nth-of-type(2){
						color: #ff700a;
						font-size: 18rpx;
						font-weight: bold;
						margin-right: 10rpx;
					}
					&:nth-of-type(3){
						color: #ff700a;
						font-size: 24rpx;
						font-weight: bold;
					}
				}
			}
				
		}	
	}	
	
	.orderInformation{
		margin-top: 20rpx;
		border-radius: 20rpx;
		background-color: #ffffff;
		box-sizing: border-box;
		padding: 20rpx;
		padding: 24rpx;
		.orderInformation1{
			width: 100%;
			.addcart{
				display: flex;
				justify-content: space-between;
				.cart{
					text{
						font-weight: bold;
						font-size: 26rpx;
					}
				}
				.number{
					text{
						font-size: 24rpx;
						color: #808080;
						opacity: 0.8;
						margin-right: 10rpx;
					}
					image{
						width: 20rpx;
						height: 15rpx;
					}
				}
			}
			.one{
				margin-top: 20rpx;
				display: flex;
				view{
					&:nth-of-type(1){
						font-size: 26rpx;
						width: 30%;
						font-weight: bold;
					}
					&:nth-of-type(2){
						opacity: 0.8;
						font-size: 24rpx;
					}
				}
			}
			.two{
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				view{
					&:nth-of-type(1){
						.text1{
							font-size: 26rpx;
							font-weight: bold;
							margin-right: 10rpx;
						}
						.text2{
							opacity: 0.8;
							font-size: 24rpx;
						}
						
					}
					&:nth-of-type(2){
						opacity: 0.8;
						font-size: 24rpx;
						color: #ff7606;
					}
				}
			}
			
			.three{
				border-top: 1rpx solid #e7e7e7;
				margin-top: 10rpx;
				padding-top: 10rpx;
				text-align: center;
				image{
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}
				text{
					font-size: 28rpx;
					color: #808080;
					
				}
			}
		}
		
	}
	
}
.location{
		// border: 1rpx solid red;
		width: 100vw;
		height: 80rpx;
		box-sizing: border-box;
		padding: 20rpx;
		background-color: #ffffff;
		position: fixed;
		border-radius: 25rpx;
		bottom: 0rpx;
		left: 0rpx;
		overflow: hidden;
		.bottom{
			width:50%;
			display: flex;
			float: right;
			right: 0rpx;
			justify-content: space-around;
			.pay{
				width: 180rpx;
				text{
					display: inline-block;
					margin-right: 10rpx;
					width: 120rpx;
					height: 40rpx;
					text-align: center;
					line-height: 40rpx;
					border-radius: 25rpx;
					border: 2rpx solid #e6e6e6;
					background-color: #ffffff;
					color:  #9d9d9d;
					font-size: 20rpx;
					font-weight: bold;
				}
			}
		}
		
			
}
	
	
</style>
